<template>
	<view class="box">
		<view class="head">
			<image src="../../static/jyj.png" mode="widthFix"></image>
			<view class="jin">
				<p>加油金</p>
				<p>2.3</p>
			</view>
			<view class="huo_g" @click="gui()">
				<p>活动规则</p>
			</view>
			<view class="zhong_g" @click="gong()">
				中奖公示
			</view>
		</view>
		<view class="bottom">
			<!-- 第二种方法 -->
			<view class="head-nav">
			  <!-- 头部选项卡 -->
			 <view :class="listIndex==index?'activite':''" @click="checkListIndex(index)" v-for="(item,index) in navList" :key="index">{{item.name}}</view>
			</view>
			<!-- 内容 -->
			<view class="content">
			   <view class="contents flex" v-if="listIndex==0" v-for="(item,index) in list" :key="index">
			     <view class="zuo">
			     	 <image :src="item.Image1" mode="widthFix" class="img"></image>
						 <view class="xia flex">
						 	<view class="xia_zuo">
						 		<image :src="item.Image2" mode="" class="img1"></image>
						 	</view>
							<view class="xia_you">
								{{item.text1}}
							</view>
						 </view>
			     </view>
					 <view class="you">
					 	<p>{{item.text2}}</p>
						<p>{{item.text7}}<span>{{item.text8}}</span>{{item.text9}}{{info.progress}}%</p>
						<view class="strip"> 
								<view class="blue" :style="'width:'+info.progress+'%'"></view>
						 </view>
						 <view class="b flex">
						 	<view class="b_zuo">
						 		<p>{{item.text3}}<span class="jia-1">{{item.text4}}</span> <span class="jia-2">{{item.text5}}</span></p>
						 	</view>
							<view class="b_you">
								{{item.text6}}
							</view>
						 </view>
					 </view>
			   </view>
				<view class="duo" v-if="listIndex==1">
					<view class="duo_b">
						 <image src="../../static/f1.png" mode=""></image>
					 <p>暂无夺宝记录，快去参与夺宝吧！</p>
					</view>
				  
				 </view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				navList:[{name:"夺宝进行时",id:'1'},{name:"我的夺宝",id:'2'}],
				listIndex:0,
				info:{progress:66,},
				list:[
					{Image1:'../../static/y1.png',Image2:'../../static/a.png',text1:"1237人已参与",text2:'德国小甘菊经典护手霜',text3:"7",text4:'加油金',text5:'价值:￥48',text6:"立即夺宝",text7:'满',text8:'4500',text9:'加油金开奖，进度'},
					{Image1:'../../static/y1.png',Image2:'../../static/a.png',text1:"1237人已参与",text2:'德国小甘菊经典护手霜',text3:"7",text4:'加油金',text5:'价值:￥48',text6:"立即夺宝",text7:'满',text8:'4500',text9:'加油金开奖，进度'},
					{Image1:'../../static/y1.png',Image2:'../../static/a.png',text1:"1237人已参与",text2:'德国小甘菊经典护手霜',text3:"7",text4:'加油金',text5:'价值:￥48',text6:"立即夺宝",text7:'满',text8:'4500',text9:'加油金开奖，进度'},
					{Image1:'../../static/y1.png',Image2:'../../static/a.png',text1:"1237人已参与",text2:'德国小甘菊经典护手霜',text3:"7",text4:'加油金',text5:'价值:￥48',text6:"立即夺宝",text7:'满',text8:'4500',text9:'加油金开奖，进度'},
					{Image1:'../../static/y1.png',Image2:'../../static/a.png',text1:"1237人已参与",text2:'德国小甘菊经典护手霜',text3:"7",text4:'加油金',text5:'价值:￥48',text6:"立即夺宝",text7:'满',text8:'4500',text9:'加油金开奖，进度'},
					{Image1:'../../static/y1.png',Image2:'../../static/a.png',text1:"1237人已参与",text2:'德国小甘菊经典护手霜',text3:"7",text4:'加油金',text5:'价值:￥48',text6:"立即夺宝",text7:'满',text8:'4500',text9:'加油金开奖，进度'},
					{Image1:'../../static/y1.png',Image2:'../../static/a.png',text1:"1237人已参与",text2:'德国小甘菊经典护手霜',text3:"7",text4:'加油金',text5:'价值:￥48',text6:"立即夺宝",text7:'满',text8:'4500',text9:'加油金开奖，进度'},
					{Image1:'../../static/y1.png',Image2:'../../static/a.png',text1:"1237人已参与",text2:'德国小甘菊经典护手霜',text3:"7",text4:'加油金',text5:'价值:￥48',text6:"立即夺宝",text7:'满',text8:'4500',text9:'加油金开奖，进度'}
				]
			}
		},
		methods:{
		  checkListIndex(index){
		    this.listIndex=index;
		  },
			gui:function(){
				uni.navigateTo({
					url:'./j_d_h'
				})
			},
			gong:function(){
				uni.navigateTo({
					url:'./jyj_gongs'
				})
			}
	},
	}
</script>

<style>
	.flex {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
		.img1{width:20px;height:20px;}
	.img{width:80px;height:80px;}
	.head{width:100%;position: relative;}
	.head image{width:100%;}
	.jin{width:20%;background-color:#fceade;border-radius:0px 50rpx 50rpx 0rpx;text-align: center;position: absolute;top:0;color: #f00;}
	.huo_g{width:20%;background-color: rgba(0, 0,0,0.3);border-radius:50rpx 0px 0px 50rpx;text-align: center;position: absolute;top:20rpx ;right:0;color:#fff;}
	.zhong_g{width:20%;background-color: rgba(0, 0,0,0.3);border-radius:50rpx 0px 0px 50rpx;text-align: center;position: absolute;top:100rpx ;right:0;color:#fff;}
	.head-nav{
	  width: 100%;
	  margin:20rpx auto;
		text-align: center;
	  display: flex;
		justify-content: space-around;
	}
	.activite{
	  font-weight: bold;
	  border-bottom: 6rpx solid #0065d9;
	}
	.head-nav>view{
	  padding-bottom: 10rpx;
	}
	.contents{width:90%;padding:20rpx;background-color: #fff;border-radius:20rpx;margin:20rpx auto;}
	.strip {
			/* 父元素相对定位 */
			position: relative;
			width: 360rpx;
			height: 12rpx;
			color: rgba(80, 80, 80, 1);
			background-color: #F5F5F5;
			border-radius: 7rpx;
			font-size: 28rpx;
			line-height: 150%;
			text-align: center;
		}
		.blue {
			height: 12rpx;
			color: rgba(80, 80, 80, 1);
			background-color: #f00;
			border-radius: 7rpx;
			font-size: 28rpx;
			line-height: 150%;
			text-align: center;
		}
		.proImg{
			width:84rpx;
			height:76rpx;
			position: absolute;
			top:-30rpx
	 	}
		.zuo{width:30%;font-size:12px;}
		.bottom p{padding:10rpx 0;}
		.b{padding:10rpx 0;}
		.b_zuo{font-size:18px; color: #f00;}
		.b_zuo .jia-1{font-size:13px;}
		.b_zuo .jia-2{font-size:13px;color: #ccc;}
		.b_you{width:30%;border-radius:30rpx;background-color: #f00;color: #fff;padding:20rpx;text-align: center;}
		.duo{text-align: center;}
		.duo image{width:100px;height:100px;}
		.duo_b{padding-top:100rpx;color: #ccc;}
</style>